<!DOCTYPE html>
<html lang="zh-CH">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本&字体的属性(1)</title>
    <style>
        p {
            font-family: '宋体';
            /*文本颜色*/
            /*预定义的颜色值*/
            color: blueviolet;
            /*十六进制*/
            /*color: #c20909;*/
            /*RGB代码*/
            /*color:rgb(2,0,255);*/
        }

        /*推荐使用英文写法*/
        /*微软雅黑*/
        div {
            /*微软雅黑，文本默认左对齐(left)*/
            font-family: 'Microsoft YaHei';

            /*文本居中对齐*/
            text-align: center;
            /*文本右对齐*/
            /*text-align: right;*/
            /**/
        }

        .a {
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
        }

        #Aa {
            /*  font-size: larger;*/
            font-size: 40px;
        }

        h2 {
            font-size: 16px;
        }

        #bold {
            /*字体加粗*/
            /*font-weight: bold;*/
            font-weight: 700;
            /*bold<=>700    normal<=>400*/
        }

        h1 {
            /*font-weight: normal;*/
            font-weight: 400;
        }

        #italic {
            font-style: italic;
        }

        em {
            font-style: normal;
        }

        #fuhe {
            /*font: font-style font-weight font-size/font-height font-family*/
            /*先后顺序不能变*/
            /*font-size 和 font-family必须要有，其他可以省略不写*/
            font: italic 400 40px 'Miciosoft YaHei'
        }

        /*默认*/
        /*可用于消除网页超链接的下划线*/
        .t1 {
            text-decoration: none;
        }

        /*下划线*/
        .t2 {
            text-decoration: underline;
        }

        /*上划线*/
        .t3 {
            text-decoration: overline;
        }

        /*删除线，不常用*/
        .t4 {
            text-decoration: line-through;
        }

        h3 {
            /*text-indent: 20px;*/
            /*更推荐使用下面的写法*/
            text-indent: 2em;
        }

        h4 {
            /*顺序不能变，font-size和font-fanmily必须有*/

            /* font-style: italic;
            font-weight: 400;
            font-size: 30px;
            font-family: 'Microsoft YaHei' Arial, Helvetica, sans-serif;*/
            font: italic 400 30px 'Microsoft YaHei';
        }
    </style>
</head>

<body>
    <!--设置字体系列-->
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <div>举头望明月</div>
    <div>低头思故乡</div>
    <p class="a">静夜思</p>
    <!--字体大小-->
    <p id="Aa">字体大小</p>
    <h2>标题比较特殊，一般需要单独指定大小</h2>

    <p id="bold">一二三四五六七</p>
    <h1>ABCDEFG</h1>

    <p id="italic">字体倾斜</p>
    <em>使倾斜的字体不倾斜</em>

    <p id="fuhe">字体复合属性</p>

    <!--文本装饰-->
    <p class="t1">默认</p>
    <p class="t2">下划线</p>
    <p class="t3">上划线</p>
    <p class="t4">删除线</p>

    <!--文本缩进-->
    <h3>文本缩进文本缩进</h3>
    <h3> 一二三四五六七<br>一二三四五六七</h3>

    <!--font复合属性-->
    <h4>复合属性复合属性复合属性</h4>
</body>

</html>